<template>
	<view class="content" style="background: #fff">
		<popup-active :visible.sync="showHonor" :popScreenList="popScreenList" @toPage="toPage"></popup-active>
		<view class="content_top" style="margin-bottom: 32rpx;">
			<view class="date">
				<text class="month">{{ date[0] }}</text>
				<text class="year">{{ date[1] }}.{{ date[2] }}</text>
			</view>
			<view class="card">
				<view class="card-image"><auto-image class="card-image" :src="beautifulDiary.imgUrl"></auto-image></view>
				<view v-if="beautifulDiary.photographer" class="author">摄影 ｜ {{ beautifulDiary.photographer || '' }}</view>
				<view class="card-desc">{{ beautifulDiary.diaryContent || '' }}</view>
				<view class="card-sign">
					<text>{{ beautifulDiary.author || '' }}</text>
				</view>
			</view>
			<view class="icons">
				<view class="icon-border" @click="goToDiary">
					<image class="item-icon" src="//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/images/interaction/edit.png"></image>
				</view>
				<view class="icon-border care">
					<image class="item-icon" :src="beautifulDiary.isNoThumbs === 1 ? thumbsImgYellow : thumbsImgHeart" @click="goThumbs()"></image>
					<text class="icon-text">{{ beautifulDiary.likeNumber }}</text>
				</view>
				<view class="icon-border"><button class="item-icon share-image" @click="wxShare"></button></view>
			</view>
		</view>
		<!-- 美好日记 -->
		<view v-if="list && list.length > 0">
			<view class="titleBox">
				<h3>美好日记</h3>
				<view class="titleMore more" @click="viewMoreDiary">更多</view>
			</view>
			<carousel-multi-diray
				ref="diray"
				class="carousel-multi"
				:list="list"
				:base-width="323"
				:keys="{ imageUrlField: 'imgUrl', titleField: 'diaryContent', dateTimeField: 'publishTime', subTitleField: 'createUserName' }"
				@itemClick.stop="viewDiary"
			>
				<template v-slot:subTitle="{ scope }">
					<view class="swiper-item-content_sub-title">{{ scope.createUserName || '' }}</view>
					<view class="swiper-item-content_sub-title">{{ scope.publishTime || '' }}</view>
				</template>
			</carousel-multi-diray>
		</view>

		<!-- 主题打卡 -->
		<view v-if="sysThemePunchPlanList && sysThemePunchPlanList.length > 0" style="margin-bottom: 32rpx;position: relative;">
			<view class="titleBox">
				<h3>主题打卡</h3>
				<view class="titleMore more" @click="toTakeCardMore">更多</view>
			</view>
			<image class="appBannerTy carouselTy" src="//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/img/home/banner-ty.png"></image>
			<view class="theme"><carousel class="carousel" :img-list="sysThemePunchPlanList" url-key="imgUrl" label-key="planTheme" @selected="toTakeCard" /></view>
		</view>
		<!-- 调查问卷 -->
		<view v-if="swiperHotList && swiperHotList.length > 0" class="aswer">
			<view class="titleBox">
				<h3>调查问卷</h3>
				<view class="titleMore more" @click="questionMore">更多</view>
			</view>
			<carousel-multi
				class="carousel-multi"
				:list="swiperHotList"
				:base-width="256"
				:keys="{ imageUrlField: 'imgUrl', titleField: 'questionnaireName', dateTimeField: 'publishTime' }"
				@itemClick="questionnaireTo"
			></carousel-multi>
		</view>
		<view class="footer">融创服务｜聚友趣</view>

		<!-- 发布 -->
		<poster v-if="showPoster" ref="poster" :params.sync="poster" @share="showShare = true" @close="showPoster = false" :dirayId="beautifulDiary.diaryId"></poster>
	</view>
</template>

<script>
import http from '../../common/request.js';
import bridgeApi from '../../common/rayBridgeSDK.js';
import uniFab from '@/components/uni-fab/uni-fab.vue';
import uniIcons from '@/components/uni-icons/uni-icons.vue';
import carousel from '@/components/uni-carousel/uni-carousel';
import carouselMulti from '@/components/uni-carousel/uni-carousel-multi.vue';
import carouselMultiDiray from '@/components/uni-carousel/uni-carousel-multiT.vue';
import popupActive from '@/components/popup-activity/popup-activity.vue';
import AutoImage from '@/components/uni-image/uni-image.vue';
import Poster from '@/components/ray-poster/poster.vue';
import { getLocationHref, getWxShareHref, getQueryParams } from '../../common/utils.js';
export default {
	onLoad(option) {
		uni.loadFontFace({
			family: 'fontdate',
			source: 'url("https://mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/fonts/date_font.ttf")',
			success() {}
		});
	},
	components: {
		carousel,
		carouselMulti,
		uniFab,
		uniIcons,
		popupActive,
		carouselMultiDiray,
		AutoImage,
		Poster
	},
	onShow() {
		this.getSomeData();
	},
	onPullDownRefresh() {
		this.getSomeData();
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	// mounted() {
	// 	this.getSomeData();
	// },
	data() {
		// 获取当前日期
		var myDate = new Date().toDateString().split(' ');
		const date = [myDate[2], myDate[1], myDate[3]];
		return {
			showPoster: false,
			poster: {
				//主板版海报
				date,
				// #ifdef MP-WEIXIN
				path: getLocationHref({ go: '/interaction/diary/index' }),
				// #endif
				// #ifdef H5
				path: getWxShareHref({ go: '/interaction/diary/index' }),
				// #endif
				// // #ifdef MP-WEIXIN
				// path: getLocationHref({go: '/interaction/diary/view'}),
				// // #endif
				// // #ifdef H5
				// path: getWxShareHref({go: '/interaction/diary/view'}),
				// // #endif
				logoUrl: '',
				imageUrl: '',
				title: '',
				codeUrl: '',
				photoGrapher: '',
				userName: ''
			},
			date,
			sharePhoto: '',
			//日记
			beautifulDiary: {},
			//主题打卡
			sysThemePunchPlanList: [],
			//美好日记
			list: [],
			// 问卷调查
			swiperHotList: [],
			swiperThemeCurrent: 0,
			thumbsImgHeart: '//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/img/heart_empty.png',
			thumbsImgYellow: '//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/hm-follow-card/images/yellow.png',
			optionsData: {},
			likeType: 0, //点赞/取消点赞，状态
			popScreenList: [],
			showHonor: false,
			oldData: {}
		};
	},
	methods: {
		goToDiary() {
			//埋点
			this.$umaTrackEvent('enterDiary', { source: '互动页' });
			uni.navigateTo({
				url: '/interaction/diary/index',
				animationDuration: 200,
				animationType: 'pop-in'
			});
		},
		async getSharePhoto() {
			const imageUrl = await this.$refs.poster.getSharePhoto();
			return { path: this.poster.path, title: this.beautifulDiary.diaryContent, imageUrl };
		},
		wxShare() {
			const { diaryContent: title, userName, imgUrl: imageUrl, qrCodeImgUrl: codeUrl, logoImgUrl: logoUrl, photographer: photoGrapher } = this.beautifulDiary;
			Object.assign(this.poster, { title, userName, imageUrl, codeUrl, logoUrl, photoGrapher });
			this.showPoster = true;
		},
		getSomeData() {
			this.getBeautifulDiary();
			this.getBeautifulDiaryList();
			this.getCardList();
			this.getQuestionList();
			this.getScreenPopInfo();
		},
		getScreenPopInfo() {
			http('api/sysQuestionnaireInfo/getQuestionPopScreen', { method: 'GET' }).then(result => {
				if (result.code == 200) {
					const list = result.popScreen || [];
					if (list.length > 0) {
						this.showHonor = true;
						this.popScreenList = list;
					}
				}
			});
		},
		getQuestionList() {
			http('/api/sysQuestionnaireInfo/getQuestionnaireInfo', { method: 'GET' }).then(result => {
				const list = result.data || [];
				for (let item of list) {
					item.publishTime = item.createTime.split(' ')[0] + ' 发布';
				}
				this.swiperHotList = list;
			});
		},
		getCardList() {
			http('/api/sysThemePunchPlan/appIndexGetList', { method: 'GET' }).then(result => {
				if (result.code == 200) {
					this.sysThemePunchPlanList = result.data || [];
				}
			});
		},
		getBeautifulDiary() {
			http('/api/cusBeautifulDiary/appIndexGetList', { method: 'GET' }).then(result => {
				this.beautifulDiary = result.data || {};
			});
		},
		goThumbs1(options) {
			if (options.isNoThumbs == 2) {
				//当前为 未点赞状态
				this.isNoThumbs = 1; //赋值 点赞=1
			} else {
				this.isNoThumbs = 2;
			}
			this.optionsData = {
				contentId: options.cusDiaryId,
				likeType: this.isNoThumbs, //调用点赞=1
				diaryType: 2 //美好日记，无运维日记，用户=2
			};
			if (options.isNoThumbs == 2) {
				// 如当前是未被点赞=0，调用点赞接口
				http('/api/cusBeautifulDiary/dataIncr', { method: 'POST', data: this.optionsData }).then(result => {
					if (result.code == 200) {
						options.isNoThumbs = 1;
						options.thumbsImgHeart = '//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/hm-follow-card/images/yellow.png';
						options.thumbsImgYellow = '//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/hm-follow-card/images/yellow.png';
						const list = result.popScreen || [];
						if (list.length > 0) {
							this.showHonor = true;
							this.popScreenList = list;
						}
					}
				});
			} else {
				//取消点赞
				http('/api/cusBeautifulDiary/dataDecr', { method: 'POST', data: this.optionsData }).then(result => {
					options.isNoThumbs = 2;
					options.thumbsImgHeart = '//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/img/heart_empty.png';
					options.thumbsImgYellow = '//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/img/heart_empty.png';
				});
			}
		},
		toPage(value) {
			http('/api/duiba/getNoLoginUrl?credits=0&redirect=' + value, { method: 'GET' }).then(result => {
				if (result.code == 200) {
					// #ifdef H5
					location.href = result.data;
					// #endif
					// #ifdef MP-WEIXIN
					uni.navigateTo({
						url: '../../home/web_view?url=' + encodeURIComponent(result.data),
						animationType: 'pop-in',
						animationDuration: 200
					});
					//#endif
				}
			});
		},
		getBeautifulDiaryList() {
			http('/api/cusBeautifulDiary/pageListSort', { method: 'POST', data: { pageNum: '1', pageSize: 3 } }).then(result => {
				const list = result.rows || [];
				for (let item of list) {
					item.publishTime = item.createTime.split(' ')[0];
				}
				this.list = list;
			});
		},
		toTakeCard({ planId, planTheme }) {
			//埋点
			this.$umaTrackEvent('takeCard', { planId, planTheme, source: '互动页' });
			uni.navigateTo({
				url: '/card/takeCard?id=' + planId,
				animationType: 'pop-in',
				animationDuration: 200
			});
		},
		viewMoreDiary() {
			//埋点
			this.$umaTrackEvent('beautifulDiary-more', { source: '互动页' });
			uni.navigateTo({
				url: '../../interaction/diary/list/index?type=hd',
				animationType: 'pop-in',
				animationDuration: 200
			});
		},
		viewDiary(item) {
			const { cusDiaryId, diaryContent } = item;
			//埋点
			this.$umaTrackEvent('beautifulDiary', { cusDiaryId, diaryContent, source: '互动页' });
			uni.navigateTo({
				url: '/interaction/diary/info/index?cusDiaryId=' + cusDiaryId,
				animationType: 'pop-in',
				animationDuration: 200,
				events: {
					updateDirayInfo(data) {
						item.isNoThumbs = data;
					}
				}
			});
		},
		/**
		 * @param {Object} options
		 * 点赞/取消点赞
		 */
		goThumbs() {
			let url = '';
			if (this.beautifulDiary.isNoThumbs) {
				url = '/api/cusBeautifulDiary/dataDecr';
				this.beautifulDiary.isNoThumbs = 0;
				this.likeType = 0;
			} else {
				url = '/api/cusBeautifulDiary/dataIncr';
				this.beautifulDiary.isNoThumbs = 1;
				this.likeType = 1;
			}

			if (this.beautifulDiary.diaryType == 2) {
				//用户发表
				this.optionsData = {
					contentId: this.beautifulDiary.cusDiaryId,
					likeType: this.likeType,
					diaryType: this.beautifulDiary.diaryType
				};
			} else {
				//运维发表
				this.optionsData = {
					contentId: this.beautifulDiary.diaryId,
					likeType: this.likeType,
					diaryType: this.beautifulDiary.diaryType
				};
			}

			http(url, { method: 'POST', data: this.optionsData }).then(result => {
				this.beautifulDiary.likeNumber = result.data.count;
				const list = result.popScreen || [];
				if (list.length > 0) {
					this.showHonor = true;
					this.popScreenList = list;
				}
			});
		},
		goActivity() {
			uni.switchTab({
				url: '/activity/index',
				animationType: 'pop-in',
				animationDuration: 200
			});
		},
		toTakeCardMore() {
			//埋点
			this.$umaTrackEvent('takeCard-more', { source: '互动页' });
			uni.navigateTo({
				url: '../../card/index',
				animationType: 'pop-in',
				animationDuration: 200
			});
		},
		questionMore() {
			//埋点
			this.$umaTrackEvent('question-more', { source: '互动页' });
			uni.navigateTo({
				url: '../../interaction/surveyList',
				animationType: 'pop-in',
				animationDuration: 200
			});
		},
		questionnaireTo({ questionnaireUrl, questionnaireName }) {
			const params = getQueryParams(questionnaireUrl);
			//埋点
			this.$umaTrackEvent('question', { questionnaireUrl, questionnaireName, source: '互动页' });
			http('api/sysQuestionnaireInfo/question', { method: 'POST', data: { paperNo: params.paperNo } }).then(result => {
				if (result.code == 200) {
					// #ifdef H5
					location.href = questionnaireUrl;
					// #endif

					// #ifdef MP-WEIXIN
					uni.navigateTo({
						url: '../../home/web_view?url=' + encodeURIComponent(questionnaireUrl),
						animationType: 'pop-in',
						animationDuration: 200
					});
					// #endif
				}
			});
		}
	}
};
</script>

<style lang="less" scoped>
.date {
	line-height: 72rpx;
	margin-bottom: 10rpx;
	font-family: fontdate !important;
}
.month {
	font-size: 62rpx;
	color: #66645d;
	margin-right: 6rpx;
	font-family: fontdate !important;
}
.year {
	font-size: 24rpx;
	color: #66645d;
	font-family: fontdate !important;
}
page {
	background-color: #fff !important;
}
.aswer {
	/deep/.swiper-item {
		margin-bottom: 0rpx !important;
		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0) !important;
		.swiper-item-content {
			padding: 24rpx 0 !important;
			.swiper-item-content_title {
				margin-bottom: 12rpx !important;
			}
		}
	}
}
.uni-body {
	background: #fff;
}
.author {
	margin-top: 11rpx;
	font-size: 17rpx;
	font-weight: 400;
	color: #65645d;
	line-height: 29rpx;
	text-align: center;
}
.field {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	padding: 5px;
}
.appBannerTy {
	width: 632upx;
	height: 328upx;
	position: absolute;
	bottom: -20upx;
	left: calc(50% - 316upx);
	z-index: 3;
}

.appBannerTy.carouselTy {
	width: 484upx;
	height: 158upx;
	left: calc(40% - 166upx);
	opacity: 0.3;
	bottom: 0;
}

.content {
	.content_top {
		padding: 7rpx 40rpx 0 40rpx;
		.card {
			box-shadow: 0px 8rpx 20rpx rgba(102, 100, 93, 0.1);
			border-radius: 20rpx;
			.card-image {
				width: 100%;
				min-height: 447rpx;
				border-radius: 20rpx 20rpx 0 0;
				overflow: hidden;
			}
			.card-desc {
				font-size: 26rpx;
				font-weight: 300;
				color: rgba(102, 100, 93, 1);
				line-height: 46rpx;
				padding: 40rpx;
			}
			.card-sign {
				font-size: 22rpx;
				font-weight: 300;
				color: rgba(138, 140, 141, 1);
				line-height: 46rpx;
				padding: 44rpx;
				text-align: center;
			}
		}
		.icons {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			margin: 32rpx 20rpx 0 0;
			color: #8a8c8d;
			.icon-border {
				margin-left: 96rpx;

				&.care {
					display: flex;
					align-items: center;
				}
				.item-icon {
					width: 40rpx;
					height: 40rpx;
				}
				.icon-text {
					font-size: 22rpx;
					margin-left: 6rpx;
					line-height: 44rpx;
				}
				.share-image {
					width: 40rpx;
					height: 40rpx;
					background: url(//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/images/interaction/share.png) no-repeat center;
					background-size: 39rpx 40rpx;
					border: none;
				}
			}
		}
	}
}
.content {
	background: #fff;
}
/* second */
.second {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-around;
	background: rgba(255, 255, 255, 1);
	box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(102, 100, 93, 0.2);
	border-radius: 10rpx;
	margin: -80rpx 28rpx 0;
	position: relative;
	padding: 0 50rpx;
}
.second-info {
	flex: auto;
	text-align: center;
	width: 22%;
	margin: 20rpx 0 10rpx;
	z-index: 5;
}
.second-info image {
	width: 70rpx;
	height: 70rpx;
}
.second-info text {
	display: block;
	color: rgba(102, 100, 93, 1);
	font-size: 24rpx;
	line-height: 60rpx;
}

/* swiper */
.activity {
	position: relative;
}
.uni-swiper__warp {
	overflow: visible !important;
}
.swiper-box {
	height: 300rpx;
	border-radius: 20rpx;
	position: relative;
}
.swiper-item {
	z-index: 1;
	margin-right: 24rpx;
	position: relative;

	.img-border {
		position: absolute;
		z-index: 2;
		top: 8rpx;
		right: 8rpx;
		background: rgba(0, 0, 0, 0.05);
		border-radius: 50%;
		padding: 8rpx;
		width: 40rpx;
		height: 40rpx;
		image {
			width: 26rpx;
			height: 26rpx;
			background: transparent;
			vertical-align: top;
		}
	}
}

.diary-swiper-item {
	width: 323rpx !important;
}

/* titleBox统一的流线背景 */
.titleBox {
	background: url(//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/img/home/lines.png) no-repeat top left #fff;
	background-size: contain;
	display: flex;
	justify-content: space-between;
	color: rgba(102, 100, 93, 1);
	align-items: center;
	padding: 100rpx 40rpx 0 40rpx;
	font-size: 36rpx;
	margin-bottom: 24rpx;
}
.titleBox h3 {
	font-weight: 500;
	font-size: 36rpx;
	font-weight: 400;
	line-height: 50rpx;
}
.titleMore {
	font-size: 24rpx;
}

/* hot */
.hot {
	position: relative;
}
.theme {
	position: relative;
	z-index: 5;
}
.wiper-hot-image {
	width: 100%;
	height: 200rpx;
	border-radius: 20rpx;
}

.wiper-diary-image {
	width: 100%;
	height: 220rpx;
	border-radius: 12rpx 12rpx 0 0;
}
.swiper-survey-image {
	width: 100%;
	height: 180rpx;
	border-radius: 12rpx 12rpx 0 0;
	margin-bottom: 20rpx;
}
.survey-content {
	width: 100%;
	.diary-content {
		margin-bottom: 12rpx;
	}
}
.diary-info {
	border-radius: 0 0 12rpx 12rpx;
	background: #fff;
	padding: 24rpx;
	box-shadow: 0px 8rpx 20rpx rgba(102, 100, 93, 0.1);
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.swiper-hot-box-diary {
	height: 445rpx;
	border-radius: 20rpx;
	position: relative;
	z-index: 1;
}
.diary-info {
	padding: 24rpx;
}
.diary-content {
	font-size: 26rpx;
	font-weight: 500;
	color: rgba(102, 100, 93, 1);
	line-height: 37rpx;
	height: 68rpx;
	margin-bottom: 38rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.diary-user {
	font-size: 24rpx;
	font-weight: 400;
	color: rgba(138, 140, 141, 0.5);
	height: 33rpx;
	line-height: 33rpx;
	margin-bottom: 4rpx;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.diary-date {
	font-size: 24rpx;
	font-weight: 400;
	color: rgba(138, 140, 141, 0.5);
	line-height: 33rpx;
}
.wiper-hot-box {
	height: 210rpx;
	border-radius: 20rpx;
	position: relative;
	z-index: 1;
}

.wiper-hot-box-survey {
	background: #fff;
	margin-bottom: 36rpx;
}
.wiper-theme-text {
	background: rgba(255, 255, 255, 0.6);
	border-radius: 0rpx 0rpx 20rpx 20rpx;
	height: 40rpx;
	position: absolute;
	bottom: 10rpx;
	width: 100%;
	line-height: 40rpx;
	font-size: 24rpx;
	font-weight: 300;
	color: rgba(102, 100, 93, 1);
	text-align: center;
	z-index: 99;
}

.swiper-pyramid .wiper-hot-image {
	height: 100rpx;
	margin-top: 50rpx;
}

.swiper-active.wiper-hot-image {
	height: 400rpx;
	margin-top: 0;
}

/* footer */
.footer {
	background: #f7f7f7;
	color: #8a8c8d;
	font-size: 22rpx;
	padding: 32rpx 0 40rpx 0;
	text-align: center;
}

image {
	vertical-align: middle;
}

.swiper-item-content_sub-title {
	font-size: 24rpx;
	font-weight: 400;
	color: rgba(138, 140, 141, 0.5);
	height: 33rpx;
	line-height: 33rpx;
}
</style>
